<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商品列表页</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/list.css" type="text/css">
    <link rel="stylesheet" href="style/common.css" type="text/css">
    <link rel="stylesheet" href="style/bottomnav.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/header.js"></script>
    <script type="text/javascript" src="js/list.js"></script>

</head>
<body>
<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->

    <div style="clear:both;"></div>

    <!-- 头部 start -->

    <!-- 头部 start -->
    <div class="header w1210 bc mt15">
        <!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
        <div class="logo w1210">
            <h1 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城商城"></a></h1>
            <!-- 头部搜索 start -->
            <cephalosome_navitems_search></cephalosome_navitems_search>
            <!-- 头部搜索 end -->

            <!-- 用户中心 start-->
            <cephalosome_navitems_user></cephalosome_navitems_user>
            <!-- 用户中心 end-->

            <!-- 购物车 start -->
            <cephalosome_navitems_cart></cephalosome_navitems_cart>
            <!-- 购物车 end -->

        </div>
        <!-- 头部上半部分 end -->

        <div style="clear:both;"></div>

        <!-- 导航条部分 start -->
        <div class="nav w1210 bc mt10">
            <!--  商品分类部分 start-->
            <div class="category fl cat1"> <!-- 非首页，需要添加cat1类 -->
                <div class="cat_hd off">
                    <!-- 注意，首页在此div上只需要添加cat_hd类，非首页，默认收缩分类时添加上off类，并将cat_bd设置为不显示，鼠标滑过时展开菜单则将off类换成on类 -->
                    <h2>全部商品分类</h2>
                    <em></em>
                </div>

                <div class="cat_bd none">
                    <cephalosome_navitems_body></cephalosome_navitems_body>
                </div>

            </div>
            <!--  商品分类部分 end-->
            <cephalosome_navitems></cephalosome_navitems>
        </div>
        <!-- 导航条部分 end -->
    </div>
    <!-- 头部 end-->

    <div style="clear:both;"></div>

    <!-- 列表主体 start -->
    <div class="list w1210 bc mt10">
        <!-- 面包屑导航 start -->
        <div class="breadcrumb">
            <h2>当前位置：<a href="">首页</a> > <a href="">电脑、办公</a></h2>
        </div>
        <!-- 面包屑导航 end -->

        <!-- 左侧内容 start -->
        <div class="list_left fl mt10">
            <!-- 分类列表 start -->
            <list_components_catlist></list_components_catlist>
            <!-- 分类列表 end -->

            <div style="clear:both;"></div>

            <!-- 新品推荐 start -->
            <list_components_newgoods></list_components_newgoods>
            <!-- 新品推荐 end -->

            <!--热销排行 start -->
            <list_components_hotgoods></list_components_hotgoods>
            <!--热销排行 end -->

            <!-- 最近浏览 start -->
            <list_components_viewd></list_components_viewd>
            <!-- 最近浏览 end -->
        </div>
        <!-- 左侧内容 end -->

        <!-- 列表内容 start -->
        <div class="list_bd fl ml10 mt10">
            <!-- 热卖、促销 start -->
            <div class="list_top">
                <!-- 热卖推荐 start -->
                <list_components_hotsale></list_components_hotsale>
                <!-- 热卖推荐 end -->

                <!-- 促销活动 start -->
                <list_components_promote></list_components_promote>
                <!-- 促销活动 end -->
            </div>
            <!-- 热卖、促销 end -->

            <div style="clear:both;"></div>

            <!-- 商品筛选 start -->
            <list_components_filter :goods_pro="goods" v-on:update-date="updateDate"></list_components_filter>
            <!-- 商品筛选 end -->

            <div style="clear:both;"></div>

            <!-- 排序 start -->
            <list_components_sort :goods_pro="goods" v-on:update-date="updateDate"></list_components_sort>
            <!-- 排序 end -->

            <div style="clear:both;"></div>

            <!-- 商品列表 start-->
            <list_components_goodslist :goods_list="goods_list"></list_components_goodslist>
            <!-- 商品列表 end-->

            <!-- 分页信息 start -->
            <list_components_page></list_components_page>

            <!-- 分页信息 end -->

        </div>
        <!-- 列表内容 end -->
    </div>
    <!-- 列表主体 end-->


    <div style="clear:both;"></div>
    <!-- 底部导航 start -->
    <topnav_bottomnav></topnav_bottomnav>
    <!-- 底部导航 end -->

    <div style="clear:both;"></div>
    <!-- 底部版权 start -->
    <topnav_bottom></topnav_bottom>
    <!-- 底部版权 end -->
</div>
<script src="js/vue.js"></script>
<script src="js/axios-min.js"></script>
<script src="js/mock-min.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="components/topnav.js"></script>
<script src="components/cephalosome.js"></script>
<script src="components/list_components.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {

            goods_list: [],
            goods: {
                keyWord: GetQueryString("serarch"),
                catid: GetQueryString("cat"),
                brand_id: "",
                spec_list: [],
                min_price: "",
                max_price: "",
                limit: "",
                page: "",
                sort_by: "comment_count",
                sort_way: "",
                per_page: "",
            },

        },
        methods: {

            /**
             * 接收 子组件传过来的值
             * @param res  子组件传来的请求
             * @param goods_pro 子组件的 配置
             */
            updateDate(res, goods_pro) {
                this.goods_list = res.data.data
                this.goods = goods_pro
            }


        },
        created() {
            //this.goods  正式环境上面需要传这个参数进去
            GetGoodsList(this.goods).then(res => {
                this.goods_list = res.data.data
            })
        },
        updated() {

        }
        ,
    })
</script>

</body>
</html>